<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/xq.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vant.min.js"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background-color: #E5E5E5;
			}
			#app {
				margin-top: 46px;
			
			}
			.asd{
				margin-top: 40px;
			}
			.head {
				z-index: 2;
				position: fixed;
				top: 20px;
				left: 15px;
				color: white;
			}

			.padding {
				padding: 10px 15px 0px;
			}

			.daxiao {
				font-size: 14px;
				color: darkgray;
			}

			.bg-color {
				background-color: #F7F8FA;
			}

			.pd-bottom {
				padding-bottom: 10px;
			}

			.mg-top {
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<van-row>
				<van-col span="24" class="asd">
					<van-icon color="black" size="24px" name="arrow-left" class="head" @click="fanhui"></van-icon>
					<van-swipe :autoplay="3000">
						<van-swipe-item v-for="(image, index) in images" :key="index">
							<img :src="image.src" onerror="this.src='../../img/photo.png'" style="width: 100%;" />
						</van-swipe-item>
					</van-swipe>
				</van-col>
			</van-row>

			<van-row class="padding">
				<van-col span="24">
					<h3>
						{{Name}}
					</h3>
				</van-col>
			</van-row>

			<van-row class="padding">
				<van-col span="24">
					<h2 class="red">￥{{MarketPrice}}</h2>
				</van-col>
			</van-row>

			<van-row class="padding daxiao">
				<van-col span="10">
					<span>快递：免运费</span>
				</van-col>
				<van-col span="10">
					<span>销量290</span>
				</van-col>
			</van-row>

			<van-row class="padding bg-color pd-bottom">
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						正品保证
					</span>
				</van-col>
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						极速退款
					</span>
				</van-col>
				<van-col span="8">
					<span class="red">
						<van-icon size="14px" name="passed"></van-icon>
						两天内发货
					</span>
				</van-col>
			</van-row>

			<van-row class="padding mg-top">
				<van-col span="24">
					<span>商品详情</span>
				</van-col>
			</van-row>
			<img :src="CoverImage" onerror="this.src='../../img/photo.png'" style="width: 100%;" />
			<van-row class="padding mg-top">
				<van-col span="24">
					<van-goods-action>
						<van-goods-action-mini-btn :icon="tb" icon-class="red" text="收藏" @click="onClickMiniBtn"></van-goods-action-mini-btn>
						<van-goods-action-big-btn text="加入购物车" @click="onClickGouWuChe"></van-goods-action-big-btn>
						<van-goods-action-big-btn primary text="立即购买" @click="onClickLiJiGouMai"></van-goods-action-big-btn>
					</van-goods-action>
				</van-col>
			</van-row>
		</div>
	</body>
	<script type="text/javascript">
		var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
		newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
		var vm = new Vue({
			el: "#app",
			data: {
				images: [],
				Name: "",
				MarketPrice: "",
				CoverImage: "",
				tb: "like-o"

			},
			created: function() {
				var w = plus.webview.currentWebview()
				console.log(w);
				var _this = this;
				ajax({ //请求产品数据
					url: "http://dsapi.ysd3g.com/API/GoodsDetail",
					dataType: "jsonp",
					data: {
						gId: w.ID
					},
					success: function(res) {
						_this.images = res.Detail.SwipeImages;
						_this.Name = res.Detail.Name;
						_this.MarketPrice = res.Detail.MarketPrice;
						_this.CoverImage = res.Detail.CoverImage;
						console.log(res);
					}
				})
			},
			methods: {
				onClickLeft: function() {
					console.log(123);
				},
				fanhui: function() {
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
					console.log("返回商品页");
				},
				onClickMiniBtn: function() {
					if (this.tb == "like-o") {
						this.tb = "like";
					} else {
						this.tb = "like-o";
					}
				},
				onClickGouWuChe: function() {
					console.log("加入购物车");
				},
				onClickLiJiGouMai: function() { //购买
					var _this = this;
					var shoppingCartJsonStr = [{
						goodsId: plus.webview.currentWebview().ID,
						buyCount: 1
					}];
					var toast = vm.$toast.loading({
						duraion: 0,
						forbidClick: true,
						message: '正在生成订单'
					});
					ajax({ //生成订单
						url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
						dataType: "jsonp",
						data: {							
							key: newUser.Key,
							shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)

						},
						success: function(res) {
							if(res.Error){
								vm.$toast.alert("出现错误，请稍后再试！")
							}else{
								localStorage.setItem("orderId", res.OrderId);
								var pay = plus.webview.create("pay.html", "pay", {}, {
									ID: plus.webview.currentWebview().ID
								}); 
								pay.show();
							}
							console.log(res);
							console.log(res.OrderId);
							console.log(localStorage.getItem("orderId"));
							console.log("生成订单");
						}
					})					
				}
			}
		})
	</script>
</html>